<template>
    <q-page>
        <div class="radioBox">
            <q-list class="q-pb-md radioWrap" no-border>
                <q-item>
                    <q-item-main>
                        <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="0" label="全部" color="primary" />
                        <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="1" label="24小时" color="primary" />
                        <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="3" label="3天" color="primary" />
                        <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="7" label="7天" color="primary" />
                        <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="14" label="14天" color="primary" />
                        <q-radio @input="onChangeDays" class="q-mr-md" keep-color v-model="days" :val="30" label="30天" color="primary" />
                    </q-item-main>
                    <q-item-side right>已加载 {{filteredList.length}} 条 </q-item-side>
                </q-item>
            </q-list>
        </div>
        <!-- <q-card>
          <q-search 
            icon="mdi-file-find" 
            class="full-width no-shadow" 
            inverted-light 
            color="grey-2"
            placeholder="可通过文章名、Tag搜索" 
            autofocus="true"
            clearable
            :value="filter"
            @input="filterResult" 
            @clear="filterResult('')" 
            @change="filterResult" 
        />
        </q-card> -->
        <q-inner-loading visible v-if="loading" class="loading">
            <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
            <b class="text-primary">数据加载中...</b>
        </q-inner-loading>
        <q-infinite-scroll :handler="loadMoreVideos" ref="scroll">
            <q-list separator>
                <q-item 
                    v-for="(item,idx) in filteredList" 
                    :key="item.vid + idx"
                    @click.native="onClickItem(item)"
                >
                    <q-item-side><img style="width: 60px;" :src="item.vpic"></q-item-side>
                    <q-item-main class="col-md">
                        <q-item-tile label class="q-pr-md">{{item.title}}</q-item-tile>
                        <q-item-tile sublabel class="q-size-xs">【{{item.account}}】 {{item.collecttime}}</q-item-tile>
                        <div class="full-width q-mt-sm">
                            <q-chip class="q-mr-sm" dense icon="mdi-cards-heart">
                                {{formatNumbers(item.upCount)}}
                            </q-chip>
                            <q-chip class="q-mr-sm" dense icon="mdi-comment-processing">
                                {{formatNumbers(item.commentCount)}}
                            </q-chip>
                            <q-chip class="q-mr-sm" dense icon="mdi-share">
                                {{formatNumbers(item.shareCount)}}
                            </q-chip>
                            <q-chip class="q-mr-sm" dense icon="mdi-clock">
                                {{formatSeconds(item.duration)}}
                            </q-chip>
                            <q-btn 
                                right dense outline
                                label="预览" color='orange-8'
                                :href="item.vurl" target="_blank" type='a'
                                @click.stop
                                v-if="isMobile"
                            />
                            <q-btn 
                                @click.stop.prevent="deleteVideos(item)"
                                right dense flat
                                icon="delete_outline"
                                label="删除"
                                class="deletebutton"
                                color='grey-8'
                            />
                        </div>
                    </q-item-main>
                    <q-item-side right icon="mdi-chevron-right" v-if="!isMobile" />
                    <!-- <q-item-side>
                        <q-toggle
                            v-model="item.modified"
                            checked-icon="check"
                            color="green"
                            dense
                            @input="changeModified(item)"
                        />
                    </q-item-side> -->
                </q-item>
            </q-list>
            <q-item v-if="!loading">没有更多了</q-item>
        </q-infinite-scroll>
        <q-modal class="drawer_video" v-model="showVideoModal" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">
            <q-btn 
                class="copyLink" 
                color='primary' 
                label="复制连接" 
                v-clipboard:copy="this.videoUrl" 
                v-clipboard:success="onCopy"
            />
            <div class="preview_frame">
                <iframe :src="this.videoUrl" scrolling="no" id="showIframe" />
            </div>
        </q-modal>
    </q-page>
</template>

<script>
export default {
    name: 'PageOfficalAccount',
    data() {
        return {
            list: [],
            days: 0,
            accountid: this.$route.params.id,
            articals: [],
            limit: 50,
            filter: '',
            showUnModified: false,
            accounttags: [],
            showVideoModal: false,
            isMobile: false,
            videoUrl: 'about:blank',
            page: 1,
            loading: true
        }
    },
    mounted(){
        this.$api.ui.pageTitle = '热门抖音视频'
        // this.loadModel(this.$route.params.id);
        // this.$api.ui.pageBackBtn = () => {
        //     this.$router.push('/offical/accounts');
        // }
        // this.getVideos()
        this.$api.offical.loadAllTags()
        this.isMobile = this.$q.platform.is.mobile
    },
    methods: {
        formatSeconds( number ) {
            if( !number ){
                return '00:00'
            }
            let second = Math.round( number / 1000 )
            let min = Math.floor( second / 60 )
            let sec = second % 60
            min = `0${min}`.slice( -2 )
            sec = `0${sec}`.slice( -2 )
            
            return `${min}:${sec}`
        },
        onCopy() {
            this.$q.notify({
                message: '复制成功', 
                position: 'top',
                color: 'green',
                timeout: 1000
            })  
        },
        getVideos(){
            // let { userid, caasid } = this.account
            this.$api.douyin.getVideos('', this.page, this.limit, data => {
                this.loading = false
                this.list = [...data]
            })
        },
        formatNumbers( num ){
          let number = '' + num
          let showStr = ''
          if( number > 9999 ){
              showStr = Math.floor(number /  10000) + 'w+'
          } else if ( number > 999 && number < 10000){
              showStr = Math.floor(number / 1000 ) + 'k+'
          } else {
              showStr = number
          }

          return showStr
        },
        loadMoreVideos(page, done){
            this.loading = true
            this.$api.douyin.getVideos('', page, this.limit, data => {
                this.list.push( ...data )
                this.loading = false
                done( data.length < this.limit )
            })
            // this.$api.offical.loadArticals( this.accountid, page, data => {
            //     this.articals.push( ...data )
            //     done( data.length < this.limit )
            // })
        },
        filterResult( val ){
            console.log( val )
            this.filter = val
        },
        onClickItem( item ){
            if ( this.isMobile){
                return
            }
            let { vurl } = item
            console.log( vurl )
            this.showVideoModal = true
            this.videoUrl = vurl + '#pageletReflowVideo'
            // let iframeWindow = document.querySelector("#showIframe").contentWindow;
            // console.log( 'iframeWindow::', iframeWindow.body[0] )
            // iframeWindow.scrollTo( -275, 0);
        },
        deleteVideos( item ) {
            let { id, caasid } = item;
            //   console.log( this.$q.dialog )
            let _dialog = this.$q
            .dialog({
                dark: true,
                title: "确认",
                message: "确认删除该视频吗？",
                cancel: "取消",
                ok: "确认删除",
                persistent: true
            })
            .then(() => {
                this.$api.douyin.deleteVideos(id, () => {
                    for (let i = 0; i < this.list.length; i++) {
                        let _localItem = this.list[i];
                        if (_localItem.id == id) {
                            this.list.splice(i, 1);
                            this.$q.notify({
                                message: "删除成功",
                                position: "center",
                                timeout: 1500,
                                color: "negative"
                            });
                            break;
                        }
                    }
                });
            })
            .catch(() => {
                console.log("cancel");
            });
        },
        onChangeDays( value ) {
            this.limit = value == 1 || value == 3 ? 200 : 50
            this.list = []
            this.$refs.scroll.reset()
            this.$refs.scroll.loadMore()

            if ( value == 3 && this.filteredList.length < 10){
                this.$refs.scroll.loadMore(); 
            }

            
        }
    },
    computed: {
        filteredList() {
            let filteredList = []
            if( !!this.days ){
                filteredList = this.list.filter( item => {
                    let { collecttime } = item
                    if( !collecttime ){
                        return false
                    }
                    let timePast = Date.now() - new Date(collecttime.replace(/\-/g, '/')).getTime()
                    let days = timePast / ( 1000 * 86400 )
                    return days < this.days
                })
            } else {
                filteredList = [...this.list]
            }

            return filteredList
        },
    }
}
</script>

<style>
.accoutAvatar{
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px;
    border-radius: 40px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6 );
}
.preview_frame{
    width: 925px;
    overflow: hidden;
    height: 600px;
    margin-left: -275px;
}
.preview_frame iframe{
    background: #0E0F1A;
    border: none;
    height: 100%;
    width: 100%;
}
.deletebutton{
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.loading{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0)
}
.radioBox{
    height: 64px;
    width: 100%;
    background: #fff;
}
.radioWrap{
    position: fixed;
    height: 64px;
    width: 100%;
    background: #fff;
    z-index: 50;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2 );
}
.copyLink{
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>